<template>
  <div class="page">
    <van-tabs
      title-active-color="#ff4d03"
      title-inactive-color="#b0b0b0"
      :active="activeName"
      color="#ff4d03"
      :sticky="true"
    >
      <van-tab :title="lableConfig.chapter + '列表'">
        <!-- 任务列表 -->
        <van-collapse
          :border="false"
          :value="activeNames"
          @change="collapseChange"
          v-if="chapters.length > 0"
        >
          <!-- 章节 -->
          <van-collapse-item
            v-for="(item, index) in chapters"
            :key="item.chapterId"
            :name="item.chapterId"
          >
            <div class="chapter flexcolcenter" slot="title">
              <!-- 只有学习状态的时候才会有进度 -->
              <div class="flexcolcenter" v-if="type == 'study'">
                <div
                  :class="[
                    item.studyStatus
                      ? `chapter_status_icon${item.studyStatus}`
                      : 'chapter_status_icon0',
                  ]"
                ></div>
                <div
                  :class="[`chapter_status_lable0`]"
                  v-if="item.studyStatus == undefined"
                >
                  未开始
                </div>
                <div
                  style="color: #19b300"
                  :class="[`chapter_status_lable${item.studyStatus}`]"
                  v-if="item.studyStatus == 1"
                >
                  学习中
                </div>
                <div
                  :class="[`chapter_status_lable${item.studyStatus}`]"
                  v-if="item.studyStatus == 2"
                >
                  已完成
                </div>
                <div
                  :class="[`chapter_status_lable${item.studyStatus}`]"
                  v-if="item.studyStatus == -1"
                >
                  未通过
                </div>
              </div>

              <div class="chapter_name overtxt">
                {{ item.chapterName }}
              </div>
              <van-icon
                name="info-o"
                @click.stop.native="handleChapterDetail(item)"
              />
              <!-- <div
                class="type"
                v-if="item.type == 0 && item.chapterName"
                style="color: #ff4d03; background-color: rgba(255, 154, 0, 0.1)"
              >
                必学
              </div>
              <div
                class="type"
                v-if="item.type == 1 && item.chapterName"
                style="color: #2cacff; background: rgba(213, 238, 255)"
              >
                选学
              </div>
              <div
                :style="{ color: item.color.font, background: item.color.bg }"
                class="type"
                v-if="item.type == 2 && item.chapterName"
              >
                n选{{ item.must_num ? item.must_num : item.mustNum }}
              </div> -->
            </div>
            <!-- 环节 -->
            <div class="tasks" v-if="item.tasks && item.tasks.length > 0">
              <div
                @click.stop.native="handleLinkTask(item2)"
                class="task flexcolcenter"
                v-for="(item2, index2) in item.tasks"
                :key="item2.taskId"
              >
                <!-- 只有学习状态的时候才会有进度 -->
                <!-- 进行状态icon -->
                <image
                  v-if="item2.studyStatus && type == 'study'"
                  class="task_status"
                  :src="`/static/images/course/status${item2.studyStatus}.png`"
                ></image>
                <!-- 是否有考核icon -->
                <div class="examIcon">考</div>

                <div class="task_name">
                  {{ item2.taskName }}
                </div>
              </div>
            </div>
          </van-collapse-item>
        </van-collapse>
        <!-- 空任务 -->
        <van-empty v-else :description="'暂无' + lableConfig.chapter + '~'" />
      </van-tab>
      <van-tab title="课程介绍">
        <!-- 课程介绍 -->
        <courseDetail :info="info"></courseDetail>
      </van-tab>
    </van-tabs>
    <div class="safeBottom"></div>
    <div
      class="addStudentBtn flexcenter"
      @click="addStudent"
      v-if="type == 'teaching'"
    >
      <image class="icon" src="/static/images/teaching/add.png"></image>
      <div>添加员工</div>
    </div>
    <div
      class="studyDetailBtn"
      @click="toStudyDetailList"
      v-if="type == 'teaching'"
    >
      员工学习情况
    </div>
    <div
      class="starStudy"
      @click="studyOpen = true"
      v-if="type == 'study' && info.studyStatus == 0"
    >
      开始学习
    </div>

    <!-- 任务详情弹框 -->
    <van-overlay :show="ChapterDetailOpen" @click="ChapterDetailOpen = false">
      <div class="wrapper" @click="ChapterDetailOpen = false">
        <div class="chapterDetail" @click.stop>
          <div class="contain">
            <div class="flexbet titleLine">
              <div class="diaTitle">{{ lableConfig.chapter }}介绍</div>
              <image
                class="closeicon"
                @click.stop="ChapterDetailOpen = false"
              ></image>
            </div>
            <div class="detail">
              <div class="lable">
                一、任务学时（课时）：{{
                  ChapterDetailItem.recommendTime
                    ? ChapterDetailItem.recommendTime
                    : "--"
                }}
                时
              </div>

              <div class="lable">二、{{ lableConfig.chapter }}目标</div>
              <div class="value">
                {{
                  ChapterDetailItem.chapterObjectives
                    ? ChapterDetailItem.chapterObjectives
                    : "暂无" + lableConfig.chapter + "目标"
                }}
              </div>
              <div class="lable">三、{{ lableConfig.chapter }}描述</div>
              <div class="value">
                {{
                  ChapterDetailItem.describe
                    ? ChapterDetailItem.describe
                    : "暂无" + lableConfig.chapter + "描述"
                }}
              </div>
            </div>
          </div>
        </div>
      </div>
    </van-overlay>
    <!-- 添加员工 -->
    <addStudentDia
      :open.sync="addStudentDia_open"
      :course="addStudentDia_item"
    ></addStudentDia>

    <!-- 开始学习确认框 -->
    <vDialog
      :showDialog.sync="studyOpen"
      contentText="是否确认开始学习?"
      @confirm="studyConfirm"
    ></vDialog>

    <vDialog :showDialog.sync="jumpisshow" :contentText="jumpText"></vDialog>
  </div>
</template>

<script>
import addStudentDia from "../teaching/components/addStudentDia.vue";

import {
  getCourseInfo,
  getCourseInfo_teacher,
  startLearning,
} from "@/common/api/course.js";
import courseDetail from "@/components/courseDetail";
import vDialog from "@/components/v-dialog";
import { level2_Info } from "@/common/api/chapter.js";

export default {
  components: { courseDetail, vDialog, addStudentDia },
  name: "message",
  data() {
    return {
      addStudentDia_open: false,
      addStudentDia_item: "",
      activeNames: [],
      activeName: 0,
      // option
      orderCourseId: "",
      courseId: "",
      schoolId: "",
      type: "",
      //该课程的状态
      chapters: [],
      info: {},
      // 任务详情
      ChapterDetailOpen: false,
      ChapterDetailItem: "",
      // 学习确认
      studyOpen: false,
      //
      lableConfig: "",
      jumpisshow: false,
      jumpText: "",
    };
  },
  onLoad(options) {
    this.lableConfig = getApp().globalData.$lableConfig;
    this.orderCourseId = options.orderCourseId;
    this.courseId = options.courseId;
    this.schoolId = options.schoolId;
    this.type = options.type;
  },
  onShow() {
    this.init();
  },
  methods: {
    /* 获取课程信息 */
    async init() {
      uni.showLoading({ mask: true, title: "加载中" });
      // type为study的时候为学生进入 通过this.orderCourseId获取课程详情
      if (this.type == "study") {
        let res = await getCourseInfo(
          this.orderCourseId,
          uni.getStorageSync("stuId")
        );
        uni.setNavigationBarTitle({
          title: res.data.courseName,
        });
        this.info = res.data;
        this.chapters = res.data.stuChapters;
      }
      // 为teaching的时候为教师进入 通过this.courseId获取课程详情 orderCourseId用于添加员工
      else {
        let res = await getCourseInfo_teacher(this.orderCourseId);
        uni.setNavigationBarTitle({
          title: res.data.courseName,
        });
        this.info = res.data;

        this.chapters =
          res.data.ccCourseChapterTypeList[0].ccCourseChapterList.map((obj) => {
            return { tasks: obj.ccCourseTaskList, ...obj };
          });
      }
    },
    /* 添加员工 */
    addStudent() {
      this.addStudentDia_open = true;
      // 将课程的id和学校id传递给弹框
      this.addStudentDia_item = {
        course_id: this.info.courseId,
        school_id: this.info.schoolId,
      };
    },
    /* 前往员工学习情况 */
    toStudyDetailList() {
      uni.navigateTo({
        url: `/pages_teaching/studentStudyList?orderCourseId=${this.info.orderCourseId}&courseName=${this.info.courseName}`,
      });
    },
    /* 开始学习确认 */
    async studyConfirm() {
      console.log("开始学习确认");
      uni.showLoading({ mask: true, title: "加载中" });
      startLearning(this.orderCourseId, uni.getStorageSync("stuId")).then(
        (res) => {
          uni.showToast({
            title: "开始学习成功",
            icon: "success",
            duration: 1500,
          });
          this.info.studyStatus = 1;
          // 局部更新状态
          this.chapters.map((item) => {
            item.studyStatus = 1;
            item.tasks.map((item2) => {
              item2.studyStatus = 1;
            });
          });
          // 为了获取courseStuId
          getCourseInfo(this.orderCourseId, uni.getStorageSync("stuId")).then(
            (res) => {
              this.info.courseStuId = res.data.courseStuId;
            }
          );
        }
      );
    },
    /* 查看任务详情 */
    handleChapterDetail(item) {
      console.log(item);
      this.ChapterDetailOpen = true;
      this.ChapterDetailItem = item;
    },
    collapseChange(e) {
      this.activeNames = e.detail;
    },
    /* 跳转环节 */
    handleLinkTask(item) {
      // 如果是study 学生进入
      if (this.type == "study") {
        if (!this.info.studyStatus == 0) {
          level2_Info(item.taskId, this.info.courseStuId).then((res) => {
            if (!res.status) {
              this.jumpisshow = true;
              this.jumpText = res.data;
            } else {
              uni.navigateTo({
                url: `/pages/selectiCourse/task?taskId=${item.taskId}&orderCourseId=${this.orderCourseId}&courseStuId=${this.info.courseStuId}`,
              });
            }
          });
        } else {
          uni.showToast({
            title: "请先学习该课程",
            icon: "none",
            duration: 1500,
          });
        }
      }
      //如果是 teaching 如果是教师进去
      else {
      }
    },
  },
};
</script>

<style scoped lang="scss">
.studyDetailBtn {
  position: fixed;
  right: 32rpx;
  bottom: calc(20rpx + env(safe-area-inset-bottom));
  @include btn_plain_line(#ffffff, #f85415, #ffffff) {
    width: 312rpx;
    height: 88rpx;
    box-sizing: border-box;
    border: 2rpx solid rgba(255, 72, 0, 0.54);
    border-radius: 44rpx;
  }
}
.addStudentBtn {
  .icon {
    margin-right: 22rpx;
    width: 36rpx;
    height: 36rpx;
  }
  position: fixed;

  bottom: calc(20rpx + env(safe-area-inset-bottom));
  left: 32rpx;
  @include btn_plain_line(#f0f0fa, #333333, #f0f0fa) {
    width: 312rpx;
    height: 88rpx;
    border-radius: 44rpx;
  }
}
.wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}
.chapterDetail {
  background-image: url("https://hgcc-metaxun.oss-cn-hangzhou.aliyuncs.com/wx/chapterbg.png");
  background-size: cover;
  border-radius: 24rpx;
  width: 608rpx;
  height: 800rpx;
  .contain {
    padding: 0 40rpx;
    .titleLine {
      padding: 32rpx 0;
      height: 44rpx;
      align-items: center;
      .diaTitle {
        font-size: 32rpx;
        font-family: PingFangSC-Semibold, PingFang SC;
        font-weight: 600;
        color: #333333;
        line-height: 44rpx;
      }
      .closeicon {
        width: 30rpx;
        height: 30rpx;
      }
    }
    .detail {
      height: 660rpx;
      overflow: auto;
      box-sizing: border-box;
      padding-top: 48rpx;
      .lable {
        margin-top: 32rpx;
        font-size: 28rpx;
        font-family: PingFangSC-Semibold, PingFang SC;
        font-weight: 600;
        color: #333333;
        line-height: 40rpx;
      }
      .lable:nth-of-type(1) {
        margin-top: 0rpx !important;
      }
      .value {
        margin: 20rpx 0 0 58rpx;
        font-size: 28rpx;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #666666;
        line-height: 40rpx;
      }
    }
  }
}
.starStudy {
  position: fixed;
  bottom: calc(20rpx + env(safe-area-inset-bottom));
  left: 32rpx;
  @include btn_plain_line(
    linear-gradient(140deg, #ff4d03 0%, #ff9a00 100%),
    #ffffff,
    #ff9a00
  ) {
    width: 686rpx;
    height: 88rpx;
    border-radius: 44rpx;
  }
}
.safeBottom {
  height: calc(88rpx + env(safe-area-inset-bottom));
}

.page {
  min-height: 100vh;
  background: white;
}
.tasks {
  box-sizing: border-box;
  padding: 64rpx 0rpx 0rpx 90rpx;
}
.task {
  height: 40rpx;
  margin-bottom: 64rpx;
  .task_status {
    width: 32rpx;
    height: 32rpx;
    margin-right: 16rpx;
  }
  .examIcon {
    margin: 0 16rpx 0 0;
    text-align: center;
    font-size: 24rpx;
    font-family: PingFangSC, PingFang SC;
    font-weight: 600;
    color: #ffffff;
    line-height: 32rpx;
    width: 32rpx;
    height: 32rpx;
    background: #ea3555;
    border-radius: 6rpx;
  }
  .task_name {
    font-size: 28rpx;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #333333;
  }
}
.chapter {
  .type {
    margin-left: 20rpx;
    font-size: 20rpx;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    height: 30rpx;
    line-height: 30rpx;
    border-radius: 20rpx;
    padding: 0 15rpx;
  }
  .chapter_status_icon0 {
    width: 16rpx;
    height: 16rpx;
    border-radius: 50%;
    background: #ffffff;
    border: 4rpx solid #fead22;
    box-sizing: border-box;
  }
  .chapter_status_icon1 {
    width: 16rpx;
    height: 16rpx;
    border-radius: 50%;
    background: #19b300;
    box-sizing: border-box;
  }
  .chapter_status_icon2 {
    width: 16rpx;
    height: 16rpx;
    border-radius: 50%;
    background: #ffffff;
    border: 4rpx solid #2cacff;
    box-sizing: border-box;
  }
  .chapter_status_icon-1 {
    width: 16rpx;
    height: 16rpx;
    border-radius: 50%;
    background: #e95756;
  }
  .chapter_status_lable0 {
    margin-left: 8rpx;
    font-size: 20rpx;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #999999;
  }
  .chapter_status_lable1 {
    margin-left: 8rpx;
    font-size: 20rpx;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #999999;
  }
  .chapter_status_lable2 {
    margin-left: 8rpx;
    font-size: 20rpx;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #999999;
  }
  .chapter_status_lable-1 {
    margin-left: 8rpx;
    font-size: 20rpx;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #e95756;
  }
  .chapter_name {
    margin-left: 20rpx;
    margin-right: 16rpx;
    max-width: 330rpx;
    font-size: 28rpx;
    font-family: PingFangSC-Semibold, PingFang SC;
    font-weight: 600;
    color: #333333;
  }
}
::v-deep .van-cell {
  margin: 20rpx 32rpx 0 32rpx;
  padding: 24rpx 20rpx;
  box-sizing: border-box;
  width: 686rpx;
  height: 96rpx;
  background: #f5f6fa;
  border-radius: 16rpx;
}
::v-deep .van-collapse-item__content {
  padding: 0;
}
</style>
